<template>
    <div class="container">
        <header>
            <van-nav-bar left-text="返回" right-text="登录" left-arrow >
                <template #title>
                    <van-search placeholder="请输入搜索关键词" shape="round" background="#ff5454"
                        style="height: 100%;" />
                </template>
            </van-nav-bar>

        </header>
        <main>
            <NavCom :navList="navList"></NavCom>
            <SkillCom :skillList="skillList"></SkillCom>

            <van-pull-refresh v-model="refreshLoading" success-text="刷新成功" @refresh="onRefresh">
                <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                    @load="onLoad">
                    <ListCom :proList="proList"></ListCom>
                </van-list>
            </van-pull-refresh>
        </main>
    </div>
</template>

<script>
import ListCom from './components/ListCom.vue';
import LunboCom from '../Detail/components/DetailLunbo.vue';
import NavCom from './components/NavCom.vue';
import SkillCom from './components/SkillCom.vue';
import { getBannerList, getSkillList, getMenuList, getProList } from '@/apis/home';
// import { doRegister } from '@/apis/user';
//在组件中数据请求，传递给子组件

export default {
    data() {
        return {
            skillList: [],
            navList: [],
            proList: [],
            count: 2,
            limitNum: 12,
            loading: false,
            finished: false,
            refreshLoading: false,
            isRefresh: false
        }
    },
    components: {
        ListCom,
        LunboCom,
        NavCom,
        SkillCom
    },
    methods: {
        onLoad() {
            if (!this.isRefresh) {
                this.count++
            }
            getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
                //模拟异步加载数据
                setTimeout(() => {
                    if (res.data.length > 0) {
                        this.proList = this.proList.concat(res.data)
                        this.count++
                        this.loading = false
                    } else {
                        this.finished = true
                    }
                }, 2000)
            })
        },
        onRefresh() {
            // 设置为false，就是代表关闭loading效果，设置为true，代表开启loading
            // 刷新的时候，默认让它设置为true，打开loading，  
            // 数据加载完毕，再设置为false，关闭loading 
            this.refreshLoading = true
            this.count = 1
            getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
                this.proList = res.data
                this.count++
                this.refreshLoading = false
            })
            this.isRefresh = true
        }
    },
    //方式一
    created() {
        getBannerList().then(({ data: res }) => {
            // console.log(res.data);
            this.bannerList = res.data
        })
        getSkillList().then(({ data: res }) => {
            // console.log(res.data);
            this.skillList = res.data
        })
        getMenuList().then(({ data: res }) => {
            this.navList = res.data
        })
        getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
            // console.log(res);
            this.proList = res.data

        })
    }
    //方式二
    // async created(){
    //     let bannerlist =await getBannerList()
    //     console.log(bannerlist);
    //     let skillList =await getSkillList({count:1,limitNum:10})
    //     console.log(skillList);

    //     let res=await doRegister({loginname:'zs',password:123456})
    //     console.log(res);
    // }
}
</script>

<style lang="less" scoped>
//左右按钮和图标变为白色
::v-deep(.van-nav-bar__content) {
    background-color: #ff5454;
}

::v-deep(.van-nav-bar__text) {
    color: white !important;
}

::v-deep(.van-icon-arrow-left) {
    color: white !important;
}

</style>